<template>
    <i v-if="isStop" :class="className" :style="style" @click.stop="click" />
    <i v-else :class="className" :style="style" @click="click" />
</template>

<script>
import '@styles/base/iconfont.less';
export default {
    name: 'TechIcon',
    props: {
        name: String, // 图标名称
        size: Number, // 字体大小
        color: String, // 自定义颜色
        type: {
            type: String,
            default: 'default',
        }, // 类型， 'default' 'primary' 'info' 'success' 'warn' 'danger'
        isStop: Boolean,
    },
    computed: {
        className() {
            const { name, type } = this.$props;
            return `tech-icon tech-icon-${name} tech-icon-${type}`;
        },
        style() {
            const { size, color, gradient } = this.$props;
            let result = {};
            if (size) {
                result['font-size'] = size + 'px';
            }
            if (color) {
                result['color'] = color;
            }
            return result;
        },
    },
    methods: {
        click() {
            this.$emit('click');
        },
    },
};
</script>
